<template>
  <div class="two">
      <li v-for="(item,index) in shopList" :key="index" @click="$router.push(`/deil/${item.id}`)">
        <p>{{item.title}}</p>
        <p>{{item.context}}</p>
        <div class="but">
          <button>-</button>
          <p>123{{item.num}}</p>
          <button>+</button>
        </div>
        <p>￥{{item.money}}</p>
      </li>
  </div>
</template>

<script>
import {mapState,mapActions} from "vuex"
export default {
  created(){
    this.SHOP_LIST()
  },
  methods:{
    ...mapActions(["SHOP_LIST"]),
  },
  computed:{
    ...mapState(["shopList"])
  }
}
</script>

<style lang="scss" scoped>
li{
  margin-top: 20px;
  p{
    margin-top: 5px;
  }
}
.but{
  display: flex;
}
</style>